<template>
	<view>
		<nav-bar title="站点详情"></nav-bar>
		<view :style="{'margin-top':navHeight+'px'}">
			<div class="banner-box">
				<u-swiper :height="190" round="0" :list="site.images"
					@click="banner_Click"></u-swiper>
			</div>
			<view class="card-box">
				<car-site-cell :data="site"></car-site-cell>
			</view>
			<view class="card" :style="{'padding-bottom':(tabIndex==1&&site.chargingList.length==0)?'0rpx':'36rpx'}">
				<custom-tab-bar :chargeMode="tabIndex" @modeChange="modeChange"></custom-tab-bar>
				<view style="padding-left:30rpx;padding-right:30rpx;" v-show="tabIndex==0">
					<view style="border-bottom: solid 1rpx #DCDFE6;padding-bottom:18rpx;">
						<view class="item-cell" style="justify-content: space-between;">
							<view class="item-cell">
								<view class="label">{{site.currentTimePeriod}}</view>
								<text>{{site.amount}}元</text>
							</view>
							<view class="item-cell" @click.stop="ele_Click">
								<text style="color:#6ABF6C;font-size:28rpx;">电价详情</text>
								<image style="width:24rpx;height:24rpx;" src="https://oss.jxhecong.com/v2/image/arrow_gray@2x.png"></image>
							</view>
						</view>
					</view>
					<view>
						<view class="item-cell">
							<view class="label">开放时间</view>
							<view>{{site.startTime}} - {{site.endTime}}</view>
						</view>
						<view class="item-cell">
							<view class="label">设备类型</view>
							<view>{{site.deviceTypeTips}}</view>
						</view>
						<view class="item-cell">
							<view class="label">设备数量</view>
							<view>{{site.deviceCount}}台</view>
						</view>
						<view class="item-cell">
							<view class="label">客服电话</view>
							<view style="color:#6ABF6C;">{{site.servicePhone}}</view>
						</view>
					</view>
				</view>
				<view v-show="tabIndex==1">
					<view v-for="(item,index) in site.chargingList" :key="index" @click.native="charge_Click(item)">
						<carDeviceCell :showBottomLine="(index==site.chargingList.length-1)?false:true" :data="item"></carDeviceCell>
					</view>
				</view>
				<empty :show="tabIndex==1&&site.chargingList.length==0"></empty>
			</view>
		</view>
		<view style="height:200rpx;"></view>
		<view class="footer">
			<view class="scan" @click.stop="scan">
				<image src="https://oss.jxhecong.com/v2/image/scan@2x.png"></image>
				<text>扫码充电</text>
			</view>
		</view>
	</view>
</template>

<script>
	var globalData = getApp({
		allowDefault: true
	}).globalData
	import navBar from '../components/navBar.vue'
	import carSiteCell from '../components/carSiteCell.vue'
	import customTabBar from '../components/customTabBar.vue'
	import carDeviceCell from '../components/carDeviceCell.vue'
	import empty from '@/components/empty.vue'
	import * as siteApi from '../../api/site/index.js'
	import * as homeApi from '../../api/home/index.js'
	export default {
		components:{navBar,carSiteCell,customTabBar,carDeviceCell,empty},
		data() {
			return {
				id:'',
				navHeight:0,
				bannerList: [
				    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				    'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				tabIndex:0,
				site:{}
			}
		},
		onLoad(options) {
			this.id=options.id;
			this.navHeight = globalData.titleHeight;
			this.getCarChargingGroupDetail();
		},
		methods: {
			banner_Click(){
				
			},
			modeChange(data){
				this.tabIndex=data.index
			},
			ele_Click(){
				uni.navigateTo({
					url:'/pages/site/carElectDetail?id=' + this.id
				})
			},
			scan(){
				uni.scanCode({
					onlyFromCamera: true,
					success: (res) => {
						let qrcode = res.result
						uni.showLoading({
							title: '请稍后'
						})
						homeApi.getChargeScan(qrcode).then((res) => {
							uni.hideLoading()
							uni.navigateTo({
								url: '/pages/site/selectChargGun?id=' + res.data.chargingId
							})
						}).catch((errMsg) => {
							uni.hideLoading()
							uni.showToast({
								title: errMsg,
								icon: 'none'
							})
						})
					}
				})
			},
			charge_Click(item){
				uni.navigateTo({
					url:'/pages/charge/carCharge?id=' + item.id
				})
			},
			getCarChargingGroupDetail() {
				siteApi.getCarChargingGroupDetail(this.id).then((res)=>{
					console.log(res.data)
					this.site = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card-box{
		position: relative;
		margin-top:-60rpx;
		margin-left:30rpx;
		margin-right:30rpx;
	}
	.card{
		margin:24rpx 30rpx;
		background-color: #FFFFFF;
		border-radius:18rpx;
		background: #FFFFFF;
		box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.06);
		border-radius: 9px;
		padding-bottom:36rpx;
	}
	.item-cell{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-top:24rpx;
	}
	.label{
		width:180rpx;
		height:42rpx;
		background-color:#F4F4F5;
		line-height:42rpx;
		border-radius:21rpx;
		text-align: center;
		color:#303133;
		font-size:24rpx;
		margin-right:30rpx;
	}
	.footer{
		position: fixed;
		left:0rpx;
		right:0rpx;
		bottom:0rpx;
		height:116rpx;
		background-color:#FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.scan{
		background: #6ABF6C;
		box-shadow: 0px 1px 2px 0px rgba(8, 139, 120, 0.3);
		border-radius: 9px;
		height:90rpx;
		display: flex;
		width:100%;
		justify-content: center;
		align-items: center;
		margin-left:30rpx;
		margin-right:30rpx;
		image{
			width:42rpx;
			height:42rpx;
		}
		text{
			color:#FFFFFF;
			font-size:36rpx;
			margin-left:24rpx;
		}
	}
</style>
